<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { UPDATE_MODEL_EVENT } from '@jctech/constants/event';
import { propTypes } from '@jctech/utils/propTypes';
import { ServerCache } from '@jctech/utils/serverCache';
import SlideupTransition from '../../transition/slideupTransition/slideupTransition.vue';

const props = defineProps({
  title: propTypes.string.def(''),
  titleSmall: propTypes.string.def(''),
  hasPadding: propTypes.bool.def(true),
  markStatus: propTypes.string.def(''),
  noShrink: propTypes.bool.def(false),
  // 默认状态
  isShrink: propTypes.bool.def(false)
});

const emits = defineEmits([UPDATE_MODEL_EVENT]);

defineOptions({
  name: 'CGroupbox'
});

const inputRef = ref(null);

const isShrinkStatus = ref(false);
const MarkStatusKey = computed(() => {
  return `GroupBoxMarkStatus_${props.markStatus}`;
});
const wrapClass = computed(() => {
  return {
    groupbox: true
  };
});
const titleClass = computed(() => {
  return {
    'groupbox-header': true,
    'groupbox-header-shrink': !props.noShrink
  };
});
const propShrinkStatus = computed(() => props.isShrink);

const handleClickTitle = () => {
  if (props.noShrink) {
    return;
  }
  isShrinkStatus.value = !isShrinkStatus.value;
};
const handleStopAction = (e) => {
  e.stopPropagation();
};
onMounted(() => {
  isShrinkStatus.value = props.isShrink;
  if (props.markStatus) {
    ServerCache.GetModel(MarkStatusKey.value).then((resoponse) => {
      isShrinkStatus.value = resoponse === '1';
    });
  }
});

watch(propShrinkStatus, () => {
  isShrinkStatus.value = props.isShrink;
});
</script>

<template>
  <div :class="wrapClass">
    <div v-if="props.title" :class="titleClass" @click="handleClickTitle">
      <slot name="header">
        <h2>
          {{ props.title }}
          <small v-if="props.titleSmall">{{ props.titleSmall }}</small>
        </h2>
      </slot>
      <div class="actions" @click="handleStopAction">
        <slot name="actions"></slot>
      </div>
    </div>
    <SlideupTransition>
      <div v-show="!isShrinkStatus" class="groupbox-body groupbox-padding">
        <slot></slot>
      </div>
    </SlideupTransition>
  </div>
</template>

<style lang="less"></style>
